#{extends 'main.html' /}
#{set title:'Home' /}

<header>
	<div class="inner">
		<nav>
			<ul>
				<li><a href="#trace"><input type="checkbox" id="log4play_level_TRACE" value="true"> TRACE</a></li>
				<li><a href="#debug"><input type="checkbox" id="log4play_level_DEBUG" value="true" checked> DEBUG</a></li>
				<li><a href="#info"><input type="checkbox" id="log4play_level_INFO" value="true" checked> INFO</a></li>
				<li><a href="#warn"><input type="checkbox" id="log4play_level_WARN" value="true" checked> WARN</a></li>
				<li><a href="#error"><input type="checkbox" id="log4play_level_ERROR" value="true" checked> ERROR</a></li>
			</ul>
		</nav>
	</div>
</header>

<div align="left">
<article>
	<br><br><br><br>
	<section>		
		<div id="thread">
		</div>
	</section>
</article>
</div>

<script type="text/javascript">

    // Create a socket
    var socket = new WebSocket('@@{Log4Play.WebSocket.index()}');
    
    // Display a message
    var display = function(json) {
    	var event = eval('(' + json + ')');
    	if ( event != null && json != null ) {
	    	var checkLevel = document.getElementById("log4play_level_" + event.level);
	    	if ( checkLevel != null && checkLevel.checked == true ) {
	    		$('#thread').append('<div class="signature"><h3 id="waypoint-init">[' + event.level + '] [' + event.category  + '] [' + event.date + ']</h3><dl>'); 
		        $('#thread').append('<dd><pre>' + event.message + '</pre></dd>');
		        $('#thread').append('</dl></div>');
		        $('#thread').scrollTo('max');
	    	}
    	}
    } 
    
    // Message received on the socket
    socket.onmessage = function(event) {
    	display(event.data);
    }

</script>
